<template>
	<fixed-bar>
		<button type="primary" @click="clickButton" :loading="loading" :disabled="disabled" class="button"
			:class="{diabled:disabled}">
			<slot></slot>
		</button>
	</fixed-bar>
</template>

<script setup>
	import { computed } from 'vue';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor } = useGetThemColor();

	const props = defineProps({
		color: {
			type: String
		},
		loading: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		radius: {
			type: String,
			default: '30px'
		}
	});

	const emit = defineEmits(['touch']);

	const clickButton = () => {
		emit('touch');
	}
	const buttonBgc = computed(() => {
		return props.color ? props.color : primaryColor.value;
	})
	const buttonRadius = computed(() => {
		return props.radius;
	})
</script>


<style lang="scss" scoped>
	.button {
		background: v-bind(buttonBgc) !important;
		border-radius: v-bind(buttonRadius);
		font-size: 15px !important;

		&.diabled {
			opacity: 0.6;
		}
	}
</style>